<template>
    <div>
        <el-row >
            任务名称：
            <el-input v-model="name" style="width:44%;margin-left: 9px;margin-top: 20px" clearable placeholder="请输入任务名称"></el-input>
        </el-row>

        <el-row>
            选择数据：
            <el-select
                    v-model="value" style="margin-top:20px;margin-left: 10px;" clearable placeholder="请选择查询数据"
                    @change="changeDataFields">
                <el-option
                        v-for="item in options"
                        v-bind:key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-row>
        <el-row>
            选择字段：
            <el-select
                    v-model="dataField" style="margin-left: 10px;margin-top:20px;" multiple clearable placeholder="请选择查询字段">
                <el-option
                        v-for="item in fieldOptionsel"
                        v-bind:key="item.dataFieldName"
                        :label="item.dataField"
                        :value="item.dataField">
                </el-option>
            </el-select>
        </el-row>
        <el-row class="block">
            <span class="demonstration">时间范围：</span>
            <el-date-picker
                    v-model="time"
                    style="width:78%;margin-left: 9px;margin-top:20px;"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
        </el-row>
        <div >
            <span>空间范围：</span>
            <el-input v-model="paramsFormData"
                      style="width:78%;margin-left: 10px;margin-top:20px"
                      clearable placeholder="请输入空间范围">
            </el-input>
            <span style="margin-left: 5px;">
            <a @click="openPosition" id="icon">
              <n3-icon type="map-marker" size="large"></n3-icon>
            </a>
          </span>
        </div>
        <el-row>
            <el-row >
                输入属性：
                <el-input v-model="inputAttr" style="width:78%;margin-left: 9px;margin-top:20px" clearable placeholder="请输入属性"></el-input>
            </el-row>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "query",
        data(){
            return{
                name:'',
                value:'',
                dataField:'',
                num:'',
                time:'',
                inputAttr: '',
                options: [],
                fieldOptionsel:[],
                paramsFormData: '',
                areaVisible: {
                    v: false
                },
            }
        },
        methods:{
            showTable() {
                let that = this;
                this.$axios.get('/data/list?offset=0&size=100')
                    .then(function (res) {
                        if (res.code === 200) {
                            let resultList = res.body.data;
                            let result=[];
                            for(let listData of resultList){
                                if(listData.data!==null){
                                    if(listData.data.volume !==0){
                                        result.push(listData);
                                    }
                                }
                            }
                            let options = [];
                            // let selOption=[];
                            for (let i = 0; i < result.length; i++) {
                                let option = {};
                                option.value = result[i].data.pk_meta_id;
                                option.label = result[i].data.meta_name;
                                //option.id=i;
                                options.push(option);
                            }
                            that.options = options;
                            // that.selOption=selOption;
                        } else {
                            // TODO 优化
                            alert(res.message);
                        }
                    }).catch(function (err) {
                    console.log(err);
                })
            },
            changeDataFields(value) {
                this.num = value;
                this.showField();
            },
            showField() {
                let that = this;
                this.$axios.get("/data//field/" + this.num)
                    .then(function (res) {
                        let result = res.body;
                        let optionsel= [];
                        for (let i = 0; i < result.length; i++) {
                            let opts={};
                            opts.dataField = result[i].description;
                            opts.dataFieldName=result[i].fieldName;
                            optionsel.push(opts);
                        }
                        that.fieldOptionsel=optionsel;

                    }).catch(function (err) {
                    console.log(err);
                })
            },
            openPosition() {
                this.$emit('childOpen');
            },
            querySubmit(){
                let inqurData={};
                let that=this;
                inqurData.tag=this.name;
                inqurData.dataId=this.value;
                if(this.time!= '') {
                    let start = this.time[0];
                    let end = this.time[1];
                    let star=new Date(start.toString().substring(4,24));
                    let en=new Date(end.toString().substring(4,24));
                    inqurData.timeRange = star.getTime()+","+en.getTime();
                }
                let fieldName=[];
                console.log(typeof this.dataField)
                let fie=this.dataField.toString().split(",");
                for(let i=0;i<this.fieldOptionsel.length;i++){
                    for(let x=0;x<fie.length;x++){
                        if(fie[x]==this.fieldOptionsel[i].dataField){
                            fieldName.push(this.fieldOptionsel[i].dataFieldName);
                        }
                    }
                }
                inqurData.fields=fieldName.toString();
                //inqurData.fields = this.ruleForm.dataField.toString().replace(/,/g, "&");
                inqurData.spatialFilter = this.paramsFormData;
                inqurData.sqlcondition = this.inputAttr;
                console.log(inqurData);
                this.$axios.post('/parallel/data/filter/' + inqurData.dataId, inqurData
                ).then(function () {
                    that.$message({
                        type: 'success',
                        message: '任务提交成功，请前往统计项目进行查看'
                    });
                }).catch(function (error) {
                    that.$message({
                        type: 'warning',
                        message: '任务提交失败'
                    });
                })
            },
        },
        mounted() {
            this.showTable();
            let that = this;
            this.$Bus.$on('coordinate', (params) => {
                console.log(params)
                // that.$refs.formInput[1].value = params;
                that.paramsFormData = params;
            });
        },
        created() {
            this.$Bus.$on('statisticVisible.v', (e) => {
                this.statisticVisible.v = e;
            });
        },

    }
</script>

<style scoped>

</style>